<template>
  <div id="counter-area" class="col">
      <div id="area-display-button" :class="'area-' + (Show ? 'hide' : 'show')" @click="switchDisplay">
          {{Show ? '◿' : '○'}}
      </div>
      <div v-if="Show">
          <div id="counter-control" class="row">
              <div v-if="!IsCounting" id="start-countdown-work-button" @click="startCountdown(1500)" class="counter-button">▶工作</div>
              <div v-if="!IsCounting" id="start-countdown-relax-button" @click="startCountdown(300)" class="counter-button">▶休息</div>
              <div v-if="IsCounting && IsPaused" id="counter-resume-button" @click="resumeCountdown()" class="counter-button">▶继续</div>
              <div v-if="IsCounting && !IsPaused" id="counter-pause-button" @click="pauseCountdown()" class="counter-button">❚❚暂停</div>
              <div v-if="IsCounting" id="counter-stop-button" @click="stopCountdown()" class="counter-button">■停止</div>
          </div>
          <div id="remain-time" :class="'remain-time-' + (IsPaused ? 'paused' : (IsCounting ? 'counting' : 'stopped'))">{{CountText}}</div>
      </div>
  </div>
</template>

<script>
let notificationPermitted = false
// 格式化时间
function formatTime(time){
    // 格式化
    let hours = Math.floor(time / 1000 / 60 / 60)
    time -= hours * 60 * 60 * 1000
    hours %= 24
    let mins = Math.floor(time / 1000 / 60)
    time -= mins * 60 * 1000
    let secs = Math.floor(time / 1000)
    time -= mins * 1000
    //let mss = remainTick
    let result = (hours ? `${hours}时` : '') + (hours || mins ? `${mins}分` : '') + `${secs}秒`
    return result
}

/* 计时相关 */
export default {
  name: 'Timer',
  data() {
    return{
      Show: true,
      CountText: '计时停止',
      CountTime: 0,
      IsCounting: false,
      StartTick: null,
      IsPaused: false,
      PauseStartTick: null,
      PausedTick: 0,
    }
  },
  methods: {
      // 切换显示
      switchDisplay(){
          this.Show = !this.Show
      },
      // 开始计时
      startCountdown(time){
          this.CountTime = time
          this.StartTick = new Date().getTime()
          if (!this.IsCounting) {
              this.IsCounting = true
              this.render()
          }
      },
      // 停止计时
      stopCountdown(){
          this.countdownFinish()
      },
      // 暂停计时
      pauseCountdown(){
          if (!this.IsCounting || this.IsPaused) return
          this.IsPaused = true
          this.PauseStartTick = new Date().getTime()
      },
      // 继续计时
      resumeCountdown(){
          if (!this.IsCounting || !this.IsPaused) return;
          this.IsPaused = false
          let curTick = new Date().getTime()
          this.PausedTick += curTick - this.PauseStartTick
          this.render()
      },
      // 渲染函数
      render(){
          if(!this.IsCounting || this.IsPaused) return
          if(!this.renderRemainTime()){
              this.IsCounting = false
              setTimeout(this.countdownFinish, 0) // 异步
          }
          window.requestAnimationFrame(this.render)
      },
      // 渲染剩余时间
      renderRemainTime(){
          // 获取剩余时间
          let curTick = new Date().getTime()
          let remainTick = this.CountTime*1000 - (curTick - this.StartTick) + this.PausedTick
          if(remainTick <= 0){
              return false
          }
          this.CountText = formatTime(remainTick)
          return true
      },
      // 完成倒数回调
      countdownFinish(){
          let curTick = new Date().getTime()
          let countTimeStr = formatTime(curTick - this.StartTick)
          if (notificationPermitted){
              new Notification('番茄工作法 计时结束', {
                  icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
                  body: `已经过去了 ${countTimeStr}`,
              })
          }
          else{
              alert(`计时结束\n已经过去了 ${countTimeStr}`)
          }

          this.IsCounting = this.IsPaused = false
          this.CountTime = this.PausedTick = 0
          this.StartTick = this.PauseStartTick = null
          this.CountText = '计时停止'
      },
  }
}
</script>

<style scoped>

#counter-area{
    width: 100%;
    min-width: 200px;
    max-width: 400px;
    border: 2px solid black;
    border-radius: 20px;
    padding: 8px;
    margin-bottom: 20px;
}

#area-display-button{
    margin-bottom: 5px;
    padding: 0 5px;
    align-self: flex-start;
    border-radius: 5px;
    font-size: 20px;
    color: grey;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s all;
    cursor: pointer;
    user-select: none;
}

.area-hide:hover, .area-show:hover{
    color: indigo;
}

#remain-time{
    width: 100%;
    min-width: 100px;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

    transition: 0.2s ease-out;
}
.remain-time-counting{
    font-size: 40px;
}
.remain-time-paused{
    font-size: 30px;
    opacity: 0.7;
}
.remain-time-stopped{
    font-size: 20px;
}

.counter-button{
    width: 50px;
    padding: 4px 8px;
    margin: 0 5px;
    border-radius: 20px;
    
    color: white;
    transition: background-color 0.2s ease-out;

    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;
}
#start-countdown-work-button            {background-color: rgb(66, 167, 88);}
#start-countdown-work-button:hover      {background-color: rgb(102, 218, 127);}
#start-countdown-relax-button           {background-color: rgb(66, 68, 167);}
#start-countdown-relax-button:hover     {background-color: rgb(123, 102, 218);}
#counter-resume-button                  {background-color: rgb(197, 175, 52);}
#counter-resume-button:hover            {background-color: rgb(218, 206, 102);}
#counter-pause-button                   {background-color: rgb(197, 86, 52);}
#counter-pause-button:hover             {background-color: rgb(218, 154, 102);}
#counter-stop-button                    {background-color: rgb(197, 52, 52);}
#counter-stop-button:hover              {background-color: rgb(218, 102, 102);}

</style>
